<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo1</title>
</head>
<body>
    <h1>h标题标签</h1>
    <h1>Hello HTML!</h1>
    <h1>this is h1</h1>
    <h2>this is h2</h2>
    <h3>this is h3</h3>
    <h4>this is h3</h4>
    <h5>this is h3</h5>
    <h6>this is h3</h6> 

    <h1>p段落标签</h1>
    <p>
        p标签描述的是段落，没有缩进
        自动根据浏览器决定排版
        html内容首位换行、空格皆无效
        html文字间输入多个空格只相当于一个空格
    </p>
    <p>
        html的段落换行基于段落标签进行
    </p>
    <p>
        空格    展示
    </p>
    <p>
        空格通过css实现，当然html也有，但不常用
        如&nbsp;&nbsp;非断行空格
        对于关键字与特殊字符同其他语言，转义字符完成
    </p>

    <h1>br换行标签</h1>
    这是非标准换行<br>
    这是标准写法换行<br/>
    br标签是段内换行，p是段间段落调整<br/> 
    <img src="https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650" alt="this is a picture" >
    <p>src是图片源标签 alt是src的标签属性</p>
    <p>src的路径可以是网络路径、绝对路径、相对路径，网络路径在同一时刻是唯一的</p>
    <img src="C:\gitee\html.git\pic\test1.jpg" alt="this is a picture" >
    <p>绝对路径</p>
    <img src="pic/test1.jpg" alt="this is a picture" >
    <p>相对路径，其中上级文件夹用../表示，按住ctrl跳转文件检查路径正确与否</p>
    <img src="pic/test1.jpg" alt="" width="200px" height="100px" >
    <p>px:像素
        单独设置width或heigth会等比例缩放，全设置则可能会变形
    </p>
    <a href="https://www.youdao.com/" target="_blank">youdao</a>
    <p>a：超链接 href 链接地址  target：打开方式 常选_blank与self，blank即新开页面，self覆盖原本页面  后面跟链接文字</p>
    <p>
        <a href="#">空链接</a>
        <a href="downloadTest.zip">download</a><br/>
        链接到文件上，也可以完成下载功能
    </p>
    <p>
        <table style="width: 500px; height: 400px;" border="1px red" cellspacing="0">
            <tr>
                <td>test00</td>
                <td>test01</td>
            </tr>
            <tr>
                <td>test10</td>
                <td>test11</td>
            </tr>
            <tr>                
                <td>test20</td>
                <td>test21</td>
            </tr>
            <tr>
                <td>test30</td>
                <td>test31</td>
            </tr>
        </table>
        table为表格标签，tr为行标签（tableRow），td为单元格标签（tableData）
    </p>
    <p>
        <table style="width: 500px; height: 400px;" border="1px red" cellspacing="0">
            <tr>
                <td colspan="2">test00</td>
                <!-- <td>test01</td> -->
            </tr>
            <tr>
                <td>test10</td>
                <td rowspan="3">test11</td>
            </tr>
            <tr>                
                <td>test20</td>
                <!-- <td>test21</td> -->
            </tr>
            <tr>
                <td>test30</td>
                <!-- <td>test31</td> -->
            </tr>
        </table>
        colsapn （跨）列合并，后接合并列数<br/>
        rowsapn  (跨) 行合并，后接合并行数
    </p>
</body>
</html>